<template>
  <div class="about">
    <header>
      <div class="header-l" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <div class="header-m">
        <img src="@/assets/img/search.png" alt="" />
        <input type="text" placeholder="搜您喜欢的..." @mouseenter="goSearch" />
      </div>
      <div class="header-r" @click="goPath">
        <van-icon name="wap-home-o" size="25" />
      </div>
    </header>
    <section>
      <div class="left">
        <ul>
          <li v-for="item in listData" :key="item.id" @click="goList(item.id)" :class="currentId === item.id?'active':''">
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="img">
          <img
            src="http://img.tea7.com/0167148_0.jpeg?x-oss-process=image/resize,w_400"
            alt=""
          />
        </div>
        <div class="content" v-for="item in listData" :key="item.id">
          <span class="nav-hd"
            ><span class="title">{{ item.title }}</span></span
          >
          <ul>
            <li v-for="i in item.goodsList" :key="i.id">
              <img :src="i.imgUrl" alt="" />
              <span>{{ i.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <div class="top">
      <van-icon name="back-top" size="20" color="#fff" class="icon" />
    </div>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import { getListData } from "@/utils/api/api";
export default {
  data() {
    return {
      listData: [],
      heightList: [],
      currentId:0
    };
  },
  components: {
    Tabbar,
  },
  beforeMount() {
    getListData().then((res) => {
      // console.log(res.data.data.listData);
      this.listData = res.data.data.listData;
      this.$nextTick(() => {
        let divs = document.querySelectorAll(".content");
        let img = document.querySelector(".img");
        let height = 0
         this.heightList.push(height)
        Array.from(divs).forEach((item) => {
          height += (item.clientHeight)
          this.heightList.push(height) 
        });
        // console.log(this.heightList);
        window.addEventListener('scroll',()=> {
          let top = (document.documentElement.scrollTop || document.body.scrollTop)
          this.currentId =  this.heightList.findIndex((item , index) => {
              return item <= top && top < this.heightList[index+1] 
            })
        })

      });
    });
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goPath() {
      this.$router.push("/");
    },
    goSearch() {
      this.$router.push("/search");
    },
    goList(id) {
      // console.log(id);
      this.currentId = id
      document.documentElement.scrollTop = this.heightList[id];
    },
    scrollRight() {
      let top = document.activeElement
    }
  },
};
</script>

<style lang="less" scoped>
.about {
  header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #b0352f;
    color: #fff;
    height: 2.75rem;
    .header-l {
      width: 2.75rem;
      text-align: center;
    }
    .header-m {
      height: 1.875rem;
      border-radius: 1.875rem;
      background: #fff;
      display: flex;
      align-items: center;
      flex: 1;
      padding: 0 0.625rem;
      img {
        width: 1.25rem;
      }
      input {
        margin-left: 0.625rem;
        outline: none;
        border: none;
      }
    }
    .header-r {
      width: 2.75rem;
      height: 2.75rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  section {
    margin-top: 44px;
    // display: flex;
    .left {
      width: 5.8125rem;
      position: fixed;
      top: 44px;
      bottom: 52px;
      z-index: 90;
      border-right: 1px solid #efefef;
      overflow: hidden;
      ul {
        li {
          text-align: center;
          box-sizing: border-box;
          width: 100%;
          height: 1.875rem;
          line-height: 30px;
          margin: 0.9375rem 0;
        }
        .active {
          border-left: 3px solid #b54f4a;
        }
      }
    }
    .right {
      margin-left: 5.8125rem;
      box-sizing: border-box;
      padding: 10px;
      margin-bottom: 100px;
      .img {
        width: 100%;
        margin-bottom: 10px;
        img {
          width: 100%;
        }
      }
      .content {
        text-align: center;
        color: #333;
        margin-bottom: 10px;
        .nav-hd {
          margin: 20px auto 10px;
          font-size: 18px;
          display: block;
          text-align: center;
          .title {
            position: relative;

            &::before {
              left: -30px;
            }
            &::after {
              right: -30px;
            }
            &::before,
            &::after {
              position: absolute;
              content: "";
              top: 0;
              bottom: 0;
              margin: auto;
              height: 1px;
              width: 20px;
              background-color: #d9d9d9;
              transform-origin: 50% 100% 0;
            }
          }
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 10px;
            box-sizing: border-box;
            width: 33%;
            img {
              width: 100%;
            }
            span {
              font-size: 0.75rem;
            }
          }
        }
      }
    }
  }
  .top {
    position: fixed;
    bottom: 55px;
    right: 10px;
    z-index: 5000;
    width: 40px;
    height: 40px;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    .icon {
      line-height: 40px;
      font-weight: 700;
    }
  }
}
</style>